<template>
  <div class="box">
    <header class="header">首页</header>
    <div class="content" ref="cont">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.imgId">
          <van-image width="100%" height="100%" fit="cover" :src="item.img" />
        </van-swipe-item>
      </van-swipe>
      <van-grid :column-num="4">
        <van-grid-item v-for="val in navList" :key="val.text" :icon="val.icon" :text="val.text" />
      </van-grid>
      <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-card
            v-for="item in proList"
            :key="item.proId"
            :num="item.stock"
            :price="item.price"
            :desc="item.introduce"
            :title="item.proName"
            :thumb="item.proImg"
            @click="fn(item.proId)"
          />
        </van-list>
      </van-pull-refresh>
      <van-icon name="back-top" class="toTop" v-show="flag" @click="gotoTop" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Image as VanImage, Grid, GridItem, Card, List, PullRefresh, Icon } from 'vant'
import { getBanner, getNav, getPro } from '../../api/index'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Card)
Vue.use(List)
Vue.use(PullRefresh)
Vue.use(Icon)

export default {
  data () {
    return {
      bannerList: [],
      navList: [],
      iconArr: [
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png.webp',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png.webp',
        '', '', '', '', '', ''
      ],
      proList: [],
      loading: false,
      finished: false,
      i: 0,
      isLoading: true,
      flag: false
    }
  },
  methods: {
    onLoad () {
      // 异步更新数据
      getPro({ index: this.i++, num: 10 }).then(res => {
        // this.proList = this.proList.concat(res.data.data);
        this.proList = [...this.proList, ...res.data.data]
        this.loading = false
        if (res.data.data.length < 1) {
          this.finished = true
        }
      })
    },
    onRefresh () {
      this.i = 0
      getPro({ index: 0, num: 10 }).then(res => {
        this.proList = res.data.data
        this.isLoading = false
      })
    },
    gotoTop () {
      this.$refs.cont.scrollTop = 0
    },
    fn (proId) {
      this.$router.replace('/detail/' + proId)
    }
  },
  created () {
    getBanner().then(res => {
      this.bannerList = res.data.data
      console.log(this.bannerList)
    })
    getNav().then(res => {
      // 处理数据之后,再设置给navList
      // [{icon:'',text:''}]
      const arr = res.data.data
      arr.length = 8
      arr.forEach((val, idx) => {
        this.navList.push({
          icon: this.iconArr[idx],
          text: val
        })
      })
    })
  },
  mounted () {
    const that = this
    this.$refs.cont.addEventListener('scroll', function () {
      if (that.$refs.cont.scrollTop > 500) {
        that.flag = true
      } else {
        that.flag = false
      }
    })
  }
}
</script>

<style>
.my-swipe .van-swipe-item {
  height: 2rem;
}
.toTop{
  position: fixed;
  bottom: 1rem;
  right: 0.4rem;
  font-size: 0.3rem;
  background: #fff;
  padding: 0.1rem;
  border-radius: 6px;
  border: solid 2px #eee;
}
</style>
